<template>
  <!--面包屑-->
  <div class="bread">
      <ul class="fl sui-breadcrumb">
          <li>
              <a href="#">全部结果</a>
          </li>
      </ul>
      <ul class="fl sui-tag" @click='closeSign($event)'>
        <!-- 分类 -->
        <li class="with-x" v-if='searchData.categoryName'>
          {{searchData.categoryName}}<i class="closeSign categoryName">×</i>
        </li>
        <!-- 关键词 -->
        <li class="with-x" v-if='searchData.keyword'>
          {{searchData.keyword}}<i class="closeSign keyword">×</i>
        </li>
        <!-- 品牌 -->
        <li class="with-x" v-if='searchData.trademark'>
          {{searchData.trademark.split(":")[1]}}<i class="closeSign trademark">×</i>
        </li>
        <!-- 属性 -->
        <template v-if='searchData.props.length'>
          <li class="with-x" v-for='attrs in searchData.props' :key='attrs.attrId'>
            {{attrs.split(":")[1]}}<i class="closeSign props" :data-prop='attrs'>×</i>
          </li>
        </template>
      </ul>
  </div>
</template>

<script>
import { createNamespacedHelpers } from 'vuex'
const {
  mapState: searchMapState,
  mapGetters: searchMapGetters,
  mapMutations: searchMapMutations,
  mapActions: searchMapActions
} = createNamespacedHelpers("search")

export default {
  name: 'Bread',
  computed:{
    ...searchMapState(['searchData']),
  },
  watch:{
    // searchData:{
    //   handler(){
    //     console.log('Bread:',this.searchData)
    //   },
    //   deep:true,
    //   immediate:true
    // }
  },
  methods:{
    ...searchMapMutations(['CLOSE_BREAD']),
    ...searchMapActions(['getSearch']),
    closeSign(e){
      if(e.target.className.includes('closeSign')){
        // 将className（原字符串对象）转换成数组对象，取出对应类名（分类/搜索值/品牌/属性）
        const value = e.target.className.split(' ')[1]
        // 清除对应面包屑
        switch(value){
          // tip 分类和搜索都属于 路由变化，search有监听路由变化，所以其实分类和搜索的处理之后可以不加搜索函数，不过此处无碍
          // 处理分类
          case 'categoryName':  
            // 让在query中的分类参数全部为空
            this.$route.query.categoryName = undefined
            this.$route.query.category1Id = undefined
            this.$route.query.category2Id = undefined
            this.$route.query.category3Id = undefined
            // 储存搜索值（若有）
            const keyword = this.$route.params.keyword
            // 处理vuex中的searchData数据
            this.CLOSE_BREAD(value)
            // 处理路由
            this.$router.replace({
              name:'Search',
              params:{keyword},
            })
            break;

          // 处理搜索值
          case 'keyword':  
            this.$route.params.keyword = undefined
            // query中存放分类参数 若有，则存起来
            const query = this.$route.query
            // 处理vuex中的searchData数据
            this.CLOSE_BREAD(value)
            // 处理路由
            this.$router.replace({
              name:'Search',
              // params此处可不写，即路由没有params，效果相同
              params:{keyword:undefined },
              query,
            })
            break;

          // 品牌
          case 'trademark':
            this.CLOSE_BREAD(value)
            break;

          // 属性
          case 'props':
            // 直接传递需要删除的属性值
            this.CLOSE_BREAD(e.target.dataset.prop);          
        }
        // 清楚对应面包屑后重新搜索
        this.getSearch()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.bread{
  margin-bottom: 5px;
  overflow: hidden;
  .sui-breadcrumb{
      padding: 3px 15px;
      margin: 0;
      font-weight: 400;
      border-radius: 3px;
      float:left;
      li{
          display: inline-block;
          line-height: 18px;
          a{
              color: #666;
              text-decoration: none;
              &:hover{
                  color: #4cb9fc;
              }
          }
      }
  }
  .sui-tag{
      margin-top: -5px;
      list-style: none;
      font-size: 0;
      line-height: 0;
      padding: 5px 0 0;
      margin-bottom: 18px;
      float: left;
      .with-x{
          font-size: 12px;
          margin: 0 5px 5px 0;
          display: inline-block;
          overflow: hidden;
          color: #000;
          background: #f7f7f7;
          padding: 0 7px;
          height: 20px;
          line-height: 20px;
          border: 1px solid #dedede;
          white-space: nowrap;
          transition:color 400ms;
          cursor: pointer;
          i{
              margin-left: 10px;
              cursor: pointer;
              font: 400 14px tahoma;
              display: inline-block;
              height: 100%;
              vertical-align: middle;
          }
          &:hover{
              color: #28a3ef;
          }
      }
  }
}
</style>
